<template>
  <section class="card-box card-one">
      <div class="card-header">
        <CardTitle :title="'经济日报·06版'" @showCalendar="setOpenPicker"></CardTitle>
      </div>

       <div class="card-content">
          <div class="images-wrapper">
            <img src="/images/bz1.jpg" />
          </div>
       </div>

       <div class="card-footer">
         <CardFooter></CardFooter>
       </div>

      <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker"></mt-datetime-picker>



  </section>
</template>

<script>
import CardTitle from '@/components/card-title/index.vue'
import CardFooter from '@/components/card-foot/index.vue'
export default {
  name:'card-one',
  data(){
    return {
      pickerValue: new Date(),
    }
  },
  created(){
    
  }, 
  mounted(){
    
  },
  methods:{
    handleConfirm(v){
      console.log(v)
    },
    setOpenPicker(){
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
    }
  },
  computed:{

  },
  components:{
    CardTitle,
    CardFooter
  }
}
</script>

<style scoped lang="scss">
  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:calc(100% - 150px);margin-top:10px;background-color:#fff;position:relative;
      .images-wrapper{
        width:calc(100% - 32px);height:100%;margin:0 auto;
        img{
          width:100%;height:100%;
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:66px;position:absolute;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }
  }
</style>